<script setup lang="ts">
import { computed, ref } from 'vue'
import { Avatar } from 'view-ui-plus'
import { MsgEnum } from '@/enums'

const pops = withDefaults(defineProps<{ isMe?: boolean }>(), { isMe: false })

const chatCls = computed(() => ({
  'chat-item': true,
  'is-me': pops.isMe,
  // 'right': (isCurrentUser.value && props.bubbleMode === 'spread') || props.bubbleMode === 'right',
}))

//用户信息
const userInfo = ref<{ avatar: string; locPlace: string }>({
  avatar: 'https://picsum.photos/200/300?random=1',
  locPlace: '',
})

const message = ref<{
  /** 消息ID */
  id: number
  /**  房间 ID */
  roomId: number
  /** 消息类型 */
  type: MsgEnum
  /** 消息体 */
  body: {
    /** 文本消息内容 */
    content?: string
    /** 回复的消息id */
    replyMsgId?: number
    /** 任意 */
    [key: string]: any
  }
  /** 发送时间戳 */
  sendTime: number
}>({
  /** 消息ID */
  id: 1,
  roomId: 1,
  type: MsgEnum.TEXT,
  body: {
    content: 'hello world',
  },
  sendTime: 0
})
</script>

<template>
  <div ref="msgVisibleEl">
    <transition name="remove">
      <div :class="chatCls">
        <!--左边的头像-->
        <el-popover class="box-item" placement="right-start">
          <template #reference>
            <!--右键菜单没有做-->
            <Avatar :src="userInfo.avatar" />
          </template>
        </el-popover>

        <!--右边的顶部和消息-->
        <div class="chat-item-box" ref="boxRef">
          <!--右边的用户名和时间和用户徽章-->
          <div class="chat-item-user-info">
            <!-- 用户徽章悬浮说明 -->
            <!-- 用户徽章 -->
            <!--            <el-tooltip-->
            <!--              effect="dark"-->
            <!--              :content="badgeInfo?.describe"-->
            <!--              :placement="isCurrentUser ? 'top-end' : 'top-start'"-->
            <!--              :teleported="false"-->
            <!--            >-->
            <!--              <img v-show="badgeInfo?.img" class="user-badge" :src="badgeInfo?.img" />-->
            <!--            </el-tooltip>-->
            <!-- 用户名 -->
            <span class="user-name">
              {{ 'tomcat' }}
            </span>
            <!-- 消息归属地 -->
            <span class="user-ip">({{ userInfo.locPlace || '未知' }})</span>
            <!-- 消息发送时间 -->
            <span class="send-time">
              {{ '2025-05-05 12:00:00' }}
            </span>
          </div>

          <el-tooltip
            effect="light"
            popper-class="option-tooltip"
            :trigger="'hover'"
            :placement="'bottom-end'"
            :offset="2"
            :show-arrow="false"
            :teleported="false"
          >
            <template #content>
              <!--展示点赞和取消 todo -->
              <span>Content</span>
            </template>

            <!--聊天消息渲染 todo-->
            <div :class="['chat-item-content']">
              <!--消息加载动画-->
              <IconFont icon="loading" colorful :size="18" spin v-if="false" />
              <RenderMessage :message="message" />
            </div>
          </el-tooltip>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.chat-item {
  display: flex;
  margin-top: 20px;
  width: 100%;
  //background-color: pink;
  padding: 0 20px;

  .chat-item-box {
    padding-left: 12px;

    .chat-item-content {
      display: flex;
      .text {
        color: white;
        padding: 6px 12px;
        background-color: blue;
        border-radius: 2px 18px 18px 18px;
      }
    }
  }
}

.is-me {
  flex-direction: row-reverse;
  .chat-item-box {
    padding-right: 12px;

    .chat-item-user-info {
      display: flex;
    }

    .chat-item-content {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .icon-loading {
        margin: 0 8px;
      }

      .text {
        background-color: var(--color-primary);
        border-radius: 18px 2px 18px 18px;

        &-mention {
          color: #f1f1f1;
        }
      }

      a {
        color: #fff;
      }
    }
  }
}

.remove-enter-active,
.remove-leave-active {
  transition:
    opacity 0.12s,
    transform 0.12s,
    height 0.12s;
}

.remove-leave-to {
  height: 14px; // 防抖动的核心，与send-time-block真实高度一致
  opacity: 0;
  transform: scale(0);
}
</style>
